<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cuda</title>

    <link rel="stylesheet" href="./css/normalize.min.css">
    <link rel="stylesheet" href="./css/main.css">
    <!-- <link rel="stylesheet" href="./css/header-page.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-welcome.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-services.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-team.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-skills.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-portfolio.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-testimonials.css"> -->
    <!-- <link rel="stylesheet" href="./css/section-touch.css"> -->
    <!-- <link rel="stylesheet" href="./css/footer-page.css"> -->
    <!-- <link rel="stylesheet" href="./css/components.css"> -->
  </head>
  <body>
    <header class="header-page">
      <div class="container header-page__container">
        <div class="header-page__start">
          <img src="./img/common/logo.png" alt="logo">
        </div>
        <div class="header-page__end">
          <nav class="header-page__nav">
            <ul class="header-page__ul">
              <li class="header-page__li">
                <a href="#" class="header-page__link is-active">
                  <span class="header-page__text">HOME</span>
                </a>
              </li>
              <li class="header-page__li">
                <a href="#" class="header-page__link">
                  <span class="header-page__text">ABOUT</span>
                </a>
              </li>
              <li class="header-page__li">
                <a href="#" class="header-page__link">
                  <span class="header-page__text">WORK</span>
                </a>
              </li>
              <li class="header-page__li">
                <a href="#" class="header-page__link">
                  <span class="header-page__text">BLOG</span>
                </a>
              </li>
              <li class="header-page__li">
                <a href="#" class="header-page__link">
                  <span class="header-page__text">CONTACT</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <!-- section-welcome -->
    <section class="section-welcome">
      <div class="container section-welcome__container">
        <h1 class="section-welcome__title">Hi there! We are the new kids on the block  and we build awesome websites and mobile apps.</h1>
        <div class="section-welcome__btn">
          <button class="btn" type="button">WORK WITH US!</button>
        </div>
      </div>
    </section>
    <!-- /.section-welcome -->

    <!-- section-services -->
    <section class="section section-services">
      <div class="container section-services__container">
        <div class="section-services__start">
          <h1 class="section-services__title">SERVICES WE PROVIDE</h1>
          <div class="separate section-services__separate"></div>
          <p class="section-services__text">We are working with both individuals and businesses from all over the globe to create awesome websites and applications.</p>
        </div>
        <div class="section-services__end">
          <div class="section-services__item">
            <div class="section-services__icon">
              <img src="./img/section-services/flag.png" alt="flag">
            </div>
            <h3 class="section-services__title medium">BRANDING</h3>
            <p class="section-services__text">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit, sed diam nonummy nibh.</p>
          </div>
          <div class="section-services__item">
            <div class="section-services__icon">
              <img src="./img/section-services/karandash.png" alt="karandash">
            </div>
            <h3 class="section-services__title medium">DESIGN</h3>
            <p class="section-services__text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
          </div>
          <div class="section-services__item">
            <div class="section-services__icon">
              <img src="./img/section-services/shestirenki.png" alt="shestirenki">
            </div>
            <h3 class="section-services__title medium">DEVELOPMENT</h3>
            <p class="section-services__text">At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium.</p>
          </div>
          <div class="section-services__item">
            <div class="section-services__icon">
              <img src="./img/section-services/rocket.png" alt="rocket">
            </div>
            <h3 class="section-services__title medium">ROCKET SCIENCE</h3>
            <p class="section-services__text">Et harum quidem rerum est et expedita distinctio. Nam libero tempore.</p>
          </div>
        </div>
      </div>
    </section>
    <!-- /.section-services -->

    <!-- section-team -->
    <section class="section section-team">
      <div class="container section-team__container">
        <div class="section-team__start">
          <h1 class="section-team__title">MEET OUR BEAUTIFUL TEAM</h1>
          <div class="separate section-team__separate"></div>
          <p class="section-team__text">We are a small team of designers and developers, who help brands with big ideas</p>
        </div>
        <div class="section-team__end">
          <div class="section-team__item">
            <div class="section-team__icon"></div>
            <h2 class="section-team__name">ANNE HATHAWAY</h2>
            <a class="section-team__link" href="#">
              <span class="section-team__prof">CEO / Marketing Guru</span>
            </a>
            <p class="section-team__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nobh euismod tincidunt ut laoreet dolore magna.</p>
            <ul class="contacts">
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--facebook" src="./img/common/facebook.png" alt="facebook">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--twitter" src="./img/common/twitter.png" alt="twitter">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--instagram" src="./img/common/instagram.png" alt="instagram">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--email" src="./img/common/email.png" alt="email">
                </a>
              </li>
            </ul>
          </div>
          <div class="section-team__item">
            <div class="section-team__icon"></div>
            <h2 class="section-team__name">KATE UPTON</h2>
            <a class="section-team__link" href="#">
              <span class="section-team__prof">Creative Director</span>
            </a>
            <p class="section-team__text">Duis aute irure dolor in in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat non diam proident.</p>
            <ul class="contacts">
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--twitter" src="./img/common/twitter.png" alt="twitter">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--instagram" src="./img/common/instagram.png" alt="instagram">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--email" src="./img/common/email.png" alt="email">
                </a>
              </li>
            </ul>
          </div>
          <div class="section-team__item">
            <div class="section-team__icon"></div>
            <h2 class="section-team__name">OLIVIA WILDE</h2>
            <a class="section-team__link" href="#">
              <span class="section-team__prof">Lead Designer</span>
            </a>
            <p class="section-team__text">Nemo enim ipsam voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mangi dolores eos qui ratione voluptatem nesciunt.</p>
            <ul class="contacts">
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--facebook" src="./img/common/facebook.png" alt="facebook">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--twitter" src="./img/common/twitter.png" alt="twitter">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--email" src="./img/common/email.png" alt="email">
                </a>
              </li>
            </ul>
          </div>
          <div class="section-team__item">
            <div class="section-team__icon"></div>
            <h2 class="section-team__name">ASHLEY CREENE</h2>
            <a class="section-team__link" href="#">
              <span class="section-team__prof">SEO / Developer</span>
            </a>
            <p class="section-team__text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            <ul class="contacts">
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--facebook" src="./img/common/facebook.png" alt="facebook">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--twitter" src="./img/common/twitter.png" alt="twitter">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--instagram" src="./img/common/instagram.png" alt="instagram">
                </a>
              </li>
              <li class="contacts__item">
                <a class="contacts__link" href="#" target="_blank">
                  <img class="contacts__icon contacts__icon--email" src="./img/common/email.png" alt="email">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- /.section-team -->

    <!-- section-skills -->
    <section class="section section-skills">
      <div class="container section-skills__container">
        <div class="section-skills__start">
          <h1 class="section-skills__title">WE GOT SKILLS!</h1>
          <div class="separate section-skills__separate"></div>
          <p class="section-skills__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nobh euismod tincidunt ut laoreet dolore magna aliqua.</p>
        </div>
        <div class="section-skills__end">
          <div class="section-skills__item">
            <div class="section-skills__progress sky">
              <span class="section-skills__number">90%</span>
            </div>
            <h3 class="section-skills__info">WEB DESIGN</h3>
          </div>
          <div class="section-skills__item">
            <div class="section-skills__progress pink">
              <span class="section-skills__number">75%</span>
            </div>
            <h3 class="section-skills__info">HTML / CSS</h3>
          </div>
          <div class="section-skills__item">
            <div class="section-skills__progress teal">
              <span class="section-skills__number">70%</span>
            </div>
            <h3 class="section-skills__info">GRAPHIC DESIGN</h3>
          </div>
          <div class="section-skills__item">
            <div class="section-skills__progress orange">
              <span class="section-skills__number">85%</span>
            </div>
            <h3 class="section-skills__info">UI / UX</h3>
          </div>
        </div>
      </div>
    </section>
    <!-- /.section-skills -->

    <!-- section-portfolio -->
    <section class="section section-portfolio">
      <div class="container section-portfolio__container">
        <div class="section-portfolio__info">
          <h1 class="section-portfolio__title">OUR PORTFOLIO</h1>
          <div class="separate section-portfolio__separate"></div>
          <p class="section-portfolio__text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetuer, adipisci velit, sed quia non numquam</p>
        </div>
        <nav class="portfolio__nav">
          <ul class="portfolio__wrapper">
            <li class="portfolio__item">
              <button class="portfolio__btn is-active" type="button">ALL</button>
            </li>
            <li class="portfolio__item">
              <button class="portfolio__btn" type="button">WEB</button>
            </li>
            <li class="portfolio__item">
              <button class="portfolio__btn" type="button">APPS</button>
            </li>
            <li class="portfolio__item">
              <button class="portfolio__btn" type="button">ICONS</button>
            </li>
          </ul>
        </nav>
        <div class="section-portfolio__wrapper">
          <div class="section-portfolio__item">
            <img class="section-portfolio__img" src="./img/section-portfolio/laptop-1.png" alt="laptop-1">
            <span class="section-portfolio__text">ISOMETRIC PERSPECTIVE MOCK-UP</span>
          </div>
          <div class="section-portfolio__item">
            <img class="section-portfolio__img" src="./img/section-portfolio/laptop-2.png" alt="laptop-2">
            <span class="section-portfolio__text">TIME ZONE APP UI</span>
          </div>
          <div class="section-portfolio__item">
            <img class="section-portfolio__img" src="./img/section-portfolio/laptop-3.png" alt="laptop-3">
            <span class="section-portfolio__text">VIRO MEDIA PLAYERS UI</span>
          </div>
          <div class="section-portfolio__item">
            <img class="section-portfolio__img" src="./img/section-portfolio/laptop-4.png" alt="laptop-4">
            <span class="section-portfolio__text">BLOG / MAGAZINE FLAT UI KIT</span>
          </div>
        </div>
        <div class="section-portfolio__btn">
          <button class="btn" type="button">LOAD MORE PROJECTS</button>
        </div>
      </div>
    </section>
    <!-- /.section-portfolio -->

    <!-- section-testimonials -->
    <div class="section section-testimonials">
      <div class="container section-testimonials__container">
        <div class="section-testimonials__info">
          <h1 class="section-testimonials__title">WHAT POEPLE SAY ABOUT US</h1>
          <div class="separate section-testimonials__separate"></div>
          <p class="section-testimonials__text">Our clients love us!</p>
        </div>
        <div class="section-testimonials__wrapper">
          <div class="section-testimonials__item">
            <div class="section-testimonials__icon"></div>
            <div class="section-testimonials__info-wrapper">
              <span class="section-testimonials__description">“Nullam dapibus blandit orci, viverra gravida dui lobortis eget. Maecenas fringilla urna ue nisl scelerisque.“</span>
              <h3 class="section-testimonials__name">CHANEL IMAN</h3>
              <span class="section-testimonials__prof">CEO of Pinterest</span>
            </div>
          </div>
          <div class="section-testimonials__item">
            <div class="section-testimonials__icon"></div>
            <div class="section-testimonials__info-wrapper">
              <span class="section-testimonials__description">“Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.“</span>
              <h3 class="section-testimonials__name">ADRIANA LIMA</h3>
              <span class="section-testimonials__prof">Founder of Instagram</span>
            </div>
          </div>
          <div class="section-testimonials__item">
            <div class="section-testimonials__icon"></div>
            <div class="section-testimonials__info-wrapper">
              <span class="section-testimonials__description">“Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.“</span>
              <h3 class="section-testimonials__name">ANNE HATHAWAY</h3>
              <span class="section-testimonials__prof">Lead Designer at Behance</span>
            </div>
          </div>
          <div class="section-testimonials__item">
            <div class="section-testimonials__icon"></div>
            <div class="section-testimonials__info-wrapper">
              <span class="section-testimonials__description">“Phasellus non purus vel arcu tempor commodo. Fusce semper, purus vel luctus molestie, risus sem cursus neque.“</span>
              <h3 class="section-testimonials__name">EMMA STONE</h3>
              <span class="section-testimonials__prof">Co-Founder of Shazam</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.section-testimonials -->

    <!-- section-touch -->
      <div class="section section-touch">
        <div class="container section-touch__container">
          <div class="section-touch__info">
            <h1 class="section-touch__title">GET IN TOUCH</h1>
            <div class="separate section-touch__separate"></div>
            <p class="section-touch__text">1600 Pennsylvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</p>
          </div>
          <form class="form" action="#" method="post">
            <div class="form__wrapper">
              <input class="form__input" type="text" name="name" placeholder="Your Name">
              <input class="form__input" type="email" name="email" placeholder="Your Email">
            </div>
            <textarea class="form__textarea" name="message" rows="1" cols="80" placeholder="Your message"></textarea>
            <div class="section-touch__btn">
              <button class="btn" type="submit">SEND MESSAGE</button>
            </div>
          </form>
        </div>
      </div>
    <!-- /.section-touch -->

    <footer class="footer-page">
      <div class="container">
        <ul class="socials"> <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">Facebook</a>
          </li>
          <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">Twitter</a>
          </li>
          <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">Google+</a>
          </li>
          <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">Linkedln</a>
          </li>
          <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">Behance</a>
          </li>
          <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">Dribble</a>
          </li>
          <li class="socials__item">
            <a class="socials__link" href="#" target="_blank">GitHub</a>
          </li>
        </ul>
      </div>
    </footer>
  </body>
</html>
